import React from 'react'
import { Button, Layout } from 'antd';
import { LeftOutlined, SyncOutlined } from '@ant-design/icons';
import SideMenu from './SideMenu'
import { useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom'



const { Content, Sider } = Layout;

export default function Main() {
    const state = useSelector(state => state)

    let pageName = state.menuNav.currentPageName ? state.menuNav.currentPageName : ''

    return (
        <>
            <Sider width={200} className="site-layout-background">
                <SideMenu />
            </Sider>
            <Layout style={{ padding: '0 24px 24px', }}>
                <div className='headerTitle'>
                    <div>
                        <div style={{
                            display: 'inline-block',
                            width: '4px',
                            height: '100%',
                            backgroundColor: '#1abc9c',
                            verticalAlign: 'middle',
                            marginRight: '10px'
                        }}></div>
                        {pageName}
                    </div>
                    <div className='rightBtn'>
                        {false ? <Button type='default'><LeftOutlined />返回</Button> : ''}
                        <Button type='default' onClick={() => { window.location = 'http://localhost:3000/home'; console.log(111); }}><SyncOutlined />刷新</Button>
                    </div>
                </div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </>
    )
}
